window.onload = () => {
    var nav_btn_index = document.getElementById("nav-left");
    var nav_btn_home = document.getElementById("nav-btn-home");
    var nav_btn_chat = document.getElementById("nav-btn-chat");
    var nav_btn_settings = document.getElementById("nav-btn-settings");
    var current_page = 0;
    var iframe_widget = document.getElementById("iframe-widget");

    nav_btn_index.onclick = () => {
        current_page = 0;
        iframe_widget.setAttribute("src", "webchat_index");
        nav_btn_home.removeAttribute("style")
        nav_btn_chat.removeAttribute("style")
        nav_btn_settings.removeAttribute("style")
    };
    nav_btn_home.onclick = () => {
        current_page = 1;
        iframe_widget.setAttribute("src", "homepage");
        nav_btn_home.setAttribute("style", "background-color: #FFFFFF20;")
        nav_btn_chat.removeAttribute("style")
        nav_btn_settings.removeAttribute("style")
    };
    nav_btn_chat.onclick = () => {
        current_page = 2;
        iframe_widget.setAttribute("src", "chatroom");
        nav_btn_home.removeAttribute("style")
        nav_btn_chat.setAttribute("style", "background-color: #FFFFFF20;")
        nav_btn_settings.removeAttribute("style")
    };
    nav_btn_settings.onclick = () => {
        current_page = 3;
        iframe_widget.setAttribute("src", "settings");
        nav_btn_home.removeAttribute("style")
        nav_btn_chat.removeAttribute("style")
        nav_btn_settings.setAttribute("style", "background-color: #FFFFFF20;")
    };
};